import { Progress, Button, Image, Tooltip } from 'antd';
import React, { memo } from 'react';
import './style.scss';

interface Props {
  progressData: {
    /**状态说明： 1：就绪，2：进行中-进度条展示0-100%，3：失败-显示【确定】按钮，4：成功-显示【确定】按钮*/
    status: 1 | 2 | 3 | 4;
    /**进度值 */
    percent: number;
    /**错误原因*/
    errorReason: string;
    /**类型说明：upload：批量上传，study：批量学习*/
    type?: 'upload' | 'study';
  };
  /**失败点【确定】回调 */
  callBackFail: () => void;
  /**成功点【确定】回调 */
  callBackSuccess: () => void;
}

/**导入插画-意图库和问答库导入中插画 */
export default memo(function UploadingPic({ progressData, callBackFail, callBackSuccess }: Props) {
  const { status, percent, errorReason, type = 'upload' } = progressData;
  const tips = {
    upload: {
      ready: '就绪',
      loading: '正在导入',
      error: '导入失败，请点击确定',
      success: '导入成功，请点击确定',
    },
    study: {
      ready: '就绪',
      loading: '正在批量学习',
      error: '学习失败，请点击确定',
      success: '学习完成，请点击确定',
    },
  };

  return (
    <div className="uploading-area">
      <Image src="/webapp/upload_pic.png" preview={false} />
      <Tooltip title={status === 3 ? errorReason : null}>
        <Progress percent={percent} size="small" status={status === 3 ? 'exception' : undefined} />
        <div className="tip">
          {status === 1 && tips[type].ready}
          {status === 2 && tips[type].loading}
          {status === 3 && tips[type].error}
          {status === 4 && tips[type].success}
        </div>
      </Tooltip>
      {/* 失败【确定】按钮 */}
      {status === 3 && (
        <Button type="primary" onClick={callBackFail}>
          确定
        </Button>
      )}
      {/* 成功【确定】按钮 */}
      {status === 4 && (
        <Button type="primary" onClick={callBackSuccess}>
          确定
        </Button>
      )}
    </div>
  );
});
